<script lang="ts">
import { 
    // onCreated,
    computed,
    watch,
    watchEffect,
    watchPostEffect,
    watchSyncEffect,

    onBeforeMount,
    onMounted,
    onBeforeUnmount,
    onUnmounted,

    onBeforeUpdate,
    onUpdated,
    
    onErrorCaptured,
    onRenderTracked,
    onRenderTriggered,
    onActivated,
    onDeactivated,
    onServerPrefetch,

    ref,
    reactive,
    readonly,
    useSlots, 
    useAttrs,
 } from "vue"
 
export default {
    // emits:['click'],
    data(){
        return {
            a:555
        }
    },
    setup(props, context){
        const {attrs, emit, expose, slots} = context;
        // const title = ref("我是组合式 API");
        const title = "我是组合式 API";

        onMounted(() => {
            console.log('onMounted', title)
        })
        
        let a = ref(4);
        
        const b = computed(() => {
            return a
        })
        const click = () => {
            a.value++;
        }

        return {
            title,
            b,
            a,
            click
        };
    },
    created(){
        
    },
    computed:{ 

    },
    methods:{ 
        click(){

        }
    },
}
</script>

<template>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</template>